<template>
  <home-pannel title="热门品牌" sub-title="国际经典 品质保障">
    <template #right>
      <div class="angle">
        <a
          class="iconfont icon-angle-left prev"
          href="javascript:;"
          @click="goRight"
          :class="{ disabled: pos === 0 }"
        ></a>
        <a
          class="iconfont icon-angle-right"
          href="javascript:;"
          @click="goLeft"
          :class="{ disabled: pos === -1240 }"
        ></a>
      </div>
    </template>
    <template #main>
      <div class="brand-box">
        <ul class="brand-list" :style="`transform: translateX(${pos}px);`">
          <li v-for="item in brandList" :key="item.id">
            <img :src="item.picture" alt="" />
          </li>
        </ul>
      </div>
    </template>
  </home-pannel>
</template>
<script>
import { findBrand } from '@/api/home'
import HomePannel from './home-pannel.vue'
import { ref } from 'vue'
export default {
  components: {
    HomePannel
  },
  setup () {
    const brandList = ref([])
    async function loadBrand () {
      const res = await findBrand()
      brandList.value = res.data.result
    }
    loadBrand()

    // 左右位移
    const pos = ref(0)
    function goRight () {
      if (pos.value === 0) return

      pos.value = pos.value + 1240
    }
    function goLeft () {
      if (pos.value === -1240) return
      pos.value = pos.value - 1240
    }
    return {
      brandList,
      goRight,
      goLeft,
      pos
    }
  }
}
</script>

<style lang="less">
.brand-box {
  overflow: hidden;
  position: relative;
}
.angle {
  a {
    width: 20px;
    height: 20px;
    color: #fff;
    display: inline-block;
    text-align: center;
    margin-left: 5px;
    background: #27ba9b;
    &.disabled {
      background: #ccc;
      cursor: not-allowed;
    }
  }
}
.brand-list {
  display: flex;
  justify-content: space-between;
  transition: all 1s;
  width: 200%;
  li {
    width: 240px;
    margin-right: 10px;
    &:nth-child(5n){
      margin-right: 0;
    }
    img{
      width: 100%;
    }
  }
}
</style>
